.demo-row {

  border-bottom: dashed 1px var(--app-border-color);
  padding-bottom: 40px;

  & + .demo-row {
    margin-top: 40px;
  }

  .demo-row-title {
    font-size: 14px;
    color: plv(colorTextSecondary);
    padding-bottom: 40px;
    position: relative;

    span {
      cursor: pointer;
    }

    .demo-row-icon-expand {
      position: absolute;
      color: plv(colorPriamry);
      right: calc(100% + 12px);
      height: 1em;
      line-height: 1em;
    }
  }

  .demo-row-content {
    font-size: 14px;
    color: plv(colorTextSecondary);

    & > *:not(.demo-line) {
      margin-right: 8px;
    }
  }

  &:not(.demo-row-show) {
    padding-bottom: 0;
  }

  &.demo-row-group {
    background-color: plv(colorBgContainer);
    box-shadow: none;

    & > .demo-row-title {
      background-color: plv(colorBgContainer);
    }

    & > .demo-row-content {
      padding: 8px 12px;
    }
  }
}

.demo-line {
  margin-bottom: 6px;

  .demo-line-title {
    display: block;
    font-size: 12px;
    color: #606266;
    padding: 8px 9px 8px 0;
    position: relative;

    &:after {
      position: absolute;
      bottom: 50%;
      border-top: 1px dashed plv(colorBorder);
      content: '';
      left: 0;
      right: 0;
    }

    span {
      background: plv(colorBgContainer);
      position: relative;
      z-index: 1;
      padding: 0 12px;
      font-weight: bold;
      text-transform: uppercase;
    }
  }

  .demo-line-content {
    display: inline-block;

    & > * {
      margin-right: 8px !important;
    }
  }
}

.demo-row-collector-operator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;

  & > div {
    padding: 8px 16px;
    background-color: plv(colorBgContainer);
    border: solid 1px var(--app-border-color);
    font-size: 12px;
    cursor: pointer;
    color: plv(colorTextSecondary);

    &:first-child {
      border-right: none;
      border-bottom-left-radius: 2px;
      border-top-left-radius: 2px;
    }

    &:last-child {
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px;
    }

    & > span {
      margin-right: 6px;
    }

    &:active {
      background-color: plv(colorBgElevated);
    }
  }
}
